<template>
<div class="container bg-gray txt333 fz26">
    <div class="empty-area" v-if="!list.length">
        <img src="../../assets/icons/invoice/invoice-icon@2x.png" alt="" class="invoice-icon">
        <div class="empty-txt">
            您还没有任何发票哦
        </div>
    </div>
    <template v-else>
        <div class="list-item" v-for="(item,index) in list" :key="index">
        <div class="flex">
            <img src="../../assets/icons/clock.png" alt="" class="clock-img">
            <div class="time-str flex-con">2018-03-26  15:30</div>
            <div class="txt333 fz22">
                待开票
            </div>
            <img src="../../assets/icons/gt.png" alt="" class="gt">
        </div>
        <div class="invoice-type">
            电子发票
        </div>
        <div class="flex invoice-detail"> 
            <div class="flex-con">
                汽车用品发票
            </div>
            <div class="invoice-money">
                318.00元
            </div>
        </div>
    </div>
    </template>
    
    <div class="footer-nav-before"></div>
    <div class="footer-nav">
        开具发票
    </div>
</div>  
</template>
<script>
export default {
  data() {
    return {
      list: [
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.footer-nav-before {
  height: 1.1467rem;
}
.footer-nav {
  height: 1.1467rem;
  background-color: #ff2a2a;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 1.1467rem;
  text-align: center;
  font-size: 0.4267rem;
  color: #ffffff;
}
.list-item {
  .invoice-type {
    padding-top: 0.4267rem;
  }
  padding: 0.36rem 0.4133rem;
  background-color: #fff;
  margin-bottom: 0.24rem;
  .clock-img {
    width: 0.4267rem;
    height: 0.4267rem;
    margin-right: 0.2533rem;
  }
  .gt {
    margin-left: 0.2533rem;
  }
  .time-str {
    font-size: 0.2933rem;
    color: rgba(51, 51, 51, 0.58);
  }
  .invoice-detail {
    padding-top: 0.28rem;
  }
  .invoice-money {
    font-size: 0.3733rem;
    font-weight: bold;
  }
}
.empty-area {
  padding-top: 118px;
  text-align: center;
  .empty-txt {
    color: #666666;
    font-size: 0.4rem;
    padding-top: 0.6667rem;
  }
}
.invoice-icon {
  width: 2.36rem;
  height: 2.36rem;
}
</style>
